<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加商品信息</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <!-- js部分 -->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=315"></script>
    <link rel="stylesheet" href="/assets/module/admin.css?v=315"/>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td {
            padding: 0;
        }

        #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }

        .tdImg {
            width: 50px;
            height: 50px;
            max-width: none;
            cursor: zoom-in;
        }

    </style>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<form id="addItem" class="layui-form model-form" enctype="multipart/form-data">

    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block">
            <select name="itemCid" id="updatecategory2" lay-verType="tips" lay-verify="required">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block">
                <textarea name="itemTitle" placeholder="请输入商品标题" class="layui-textarea"
                          lay-verType="tips" lay-verify="required" required autocomplete="off"
                          maxlength="100"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input class="layui-input" placeholder="请输入商品价格"
                   lay-verType="tips" lay-verify="number" name="itemPrice" autocomplete="off"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品买点</label>
        <div class="layui-input-block">
            <input class="layui-input" placeholder="商品买点"
                   lay-verType="tips" lay-verify="text" name="itemDetailsNews" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品销量</label>
        <div class="layui-input-block">
            <input class="layui-input" placeholder="请输入商品销量"
                   lay-verType="tips" lay-verify="number" name="itemSales" autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item" hidden="hidden">
        <label class="layui-form-label">商品销量</label>
        <div class="layui-input-block">
            <input class="layui-input" hidden="hidden"  id="idsInput" lay-verType="tips" lay-verify="text" name="ids" autocomplete="off"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品状态</label>
        <div class="layui-input-block">
            <input type="radio" name="itemStats" value="1" title="正常" {{d.itemStats==1 ? "checked":''}}/>
            <input type="radio" name="itemStats" value="0" title="禁用" {{d.itemStats==0 ? "checked":''}}/>
        </div>
    </div>

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal"
                id="testList">选择文件
        </button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>路径</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    var files = [];
    var ids="";
    //Demo
    layui.use(['form', 'laydate', 'notice', 'admin', 'util', 'upload', 'layedit'], function () {
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var notice = layui.notice;
        var util = layui.util;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var $ = layui.jquery;

        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: 'item/uplaodItem'
            //  ,size: 60 //限制文件大小，单位 KB
            , accept: 'file'
            , exts: 'doc|docx|pdf|xls|xlsx|ppt|pptx|img|png|jpg' //只允许上传文本文件
            // ,data:{'ID':277}   //可放扩展数据  key-value
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        ,
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 200) { //上传成功
                    files.push({"fileUrl": res.data});
                    console.info(files);
                    var json = JSON.stringify(files);
                    //将上传的文件信息加入到集合中并转换成json字符串
                    $("#fileJson").attr("value", json);
                    var fileUrl = res.data;
                    console.info(fileUrl)
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    // tds.eq(3).html('<span>'+fileUrl+'</span>');
                    tds.eq(3).html('<img src="' + fileUrl + '"/>');

                    tds.eq(4).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
        /*表单提交事件*/

        form.on('submit(formDemo)', function(data){
            for (var i = 0; i < files.length; i++) {
                if (i<files.length-1) {
                    ids+=files[i].fileUrl+"@"
                }else {
                    ids+=files[i].fileUrl;
                }
            }
            $("#idsInput").attr("value",ids)
            var  up=$("#addItem").serialize();
            $.post("/item/additem",up, function (res) {
                    if (res.code === 200) {
                        $("#addItem")[0].reset();
                        layui.form.render();
                        notice.msg("添加商品成功", {icon: 1, timeout: 2000, animateInside: true, audio: '1'});
                        window.location.href="additem"
                    } else {
                        notice.msg(res.message, {icon: 2, timeout: 2000, animateInside: true, audio: '1'});
                    }
                }
            );
            return false;
        });






        laydate.render({
            elem: '#test1',
            range: true,
            tigger: 'click'
        });

        //检查项目添加到下拉框中
        $.ajax({
            url: '/category/list',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data, function (index, item) {
                    $("#updatecategory2").append(new Option(item.cName, item.cId));// 下拉菜单里添加元素
                });
                form.render("select");    //重新渲染 固定写法
            }
        });


    });
</script>


<!--// 数据表格中操作按钮的权限控制-->
<script type="text/javascript" src="/assets/js/common.js?v=315"></script>
</body>
</html>